<template>
  <div>
    <el-row class="title">
      <el-col :xs="12" :sm="24" :md="24" :lg="24" :xl="8">
        <span class="title-name"
          >环境场信息统计</span
        >
      </el-col>
      <el-col :sm="24" :xs="24" :md="24" :lg="24" :xl="16">
        <div class="right">
          <span>最大值:{{ maxValue }}</span>
          <span>最小值:{{ minValue }}</span>
          <span>平均值:{{ aveValue }}</span>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-empty
            v-show="xData.length<=0"
            description="没有发现场图相关数据"
          ></el-empty>
      <div  v-show="xData.length>0" id="barchart" :style="{ height: height, width: width }" />
    </div>
  </div> 
</template>

<script>
import * as echarts from "echarts";
import { frequency } from "@/api/sceneManage";

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    headTitle: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "180px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    unit: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "#239DD2",
    },
    type: String,
  },
  inject: ["curFieldPatternId", "curDate"],
  data() {
    return {
      chart: null,
      xData: [],
      yData: [],
      minValue:0,
      maxValue:0,
      aveValue:0,
    };
  },
  computed: {
    fieldPatternId() {
      return this.curFieldPatternId();
    },
    ts() {
      return this.curDate();
    },
  },
  watch: {
    fieldPatternId: {
      immediate: true,
      handler(val) {
        // this.getData();
      },
    },
    type: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getData();
        }
      },
    },
  },
  mounted() {
    window.addEventListener("resize", this.resizeHandler);
    
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandler);
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    resizeHandler() {
      this.chart.resize();
    },
    initChart() {
      
this.$nextTick(()=>{
 if(!this.chart){
      this.chart = echarts.init(document.getElementById("barchart"));
      }
      this.setOptions();
})
     
    },
    getData() {
      let frequencyData = {
        fieldPatternId: this.fieldPatternId,
        type: this.type,
        ts: this.ts,
      };
      //频数图
      frequency(frequencyData).then((res) => {
        this.xData = res.value.map((e) => {
          return e.bottom;
        });
        this.yData = res.value.map((e) => {
          return e.frequency;
        });
        this.initChart();
        this.maxValue = this.getMaxValue(this.xData);
        this.minValue = this.getMinValue(this.xData);
        this.aveValue = this.getAveValue(this.xData);
      });
    },
    getMaxValue(arr) {
      return Math.max(...arr);
    },
    getMinValue(arr) {
      return Math.min(...arr);
    },
    getAveValue(arr) {
      let sum = 0;
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i];
      }
      return Math.round((sum / arr.length) * 10) / 10;
    },
    setOptions() {
      if(!this.chart){
        return;
      }
      this.chart.setOption({
        grid: {
          left:25,
          right: 20,
          bottom: 20,
          top: 35,
          // containLabel: true
        },
        xAxis: {
          data: this.xData,
          type: "category",
          axisLabel: {
            color: "#636E78",
            fontWeight: 700,
            showMaxLabel: true,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
          },
        },
        yAxis: {
          name: "频数",
          show: true,
          axisLine: {
            show: true,
          },
          splitLine: { show: false },
        },
        series: [
          {
            //name: title,
            type: "bar",
            data: this.yData,
            animationDuration: 2800,
            animationEasing: "cubicInOut",
            showBackground: true,
            backgroundStyle: {
              color: "#EFF8FF",
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#1D99EF" },
                { offset: 1, color: "#1DC9EF" },
              ]),
            },
            // emphasis: {
            //   itemStyle: {
            //     color: "#22AC38"
            //   },
            // },
            // label: {
            //   //文本标签中数值的小数点精度
            //   show: true,
            //   color: "#6b6a6a",
            //   fontWeight: 'blod',
            //   distance: 0,
            //   verticalAlign: 'bottom',
            //   position: 'bottom'
            // }
          },
        ],
      });
    },
  },
};
</script>
